@mixin flex-variant($display, $direction: false, $align: false, $justify: false, $wrap: false) {
  display: $display;

  @if $direction {
    flex-direction: $direction;
  }

  @if $align {
    align-items: $align;
  }

  @if $justify {
    justify-content: $justify;
  }

  @if $wrap {
    flex-wrap: $wrap;
  }

  // fix
  & > * {
    min-width: 0;
  }
}

@mixin flex($direction: false, $align: false, $justify: false, $wrap: false) {
  @include flex-variant(flex, $direction: $direction, $align: $align, $justify: $justify, $wrap: $wrap);
}

@mixin inline-flex($direction: false, $align: false, $justify: false, $wrap: false) {
  @include flex-variant(inline-flex, $direction: $direction, $align: $align, $justify: $justify, $wrap: $wrap);
}

@mixin clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}


@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


@mixin centerer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin size($width, $height) {
  width: $width;
  height: $height;
}

/**
 * 超出一行省略号
 * 
**/
@mixin ellipsis($rowCount: 1) {
	@if $rowCount <=1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $rowCount;
    -webkit-box-orient: vertical;
  }
}

// 分割线
// ===========================================
//
// $type      = padding, margin
// $multiple  = 1, 2, 5, 10... ; e.g. mt5, mt10, mt15...
// $end       = 10, 20, 50... ; Number of times loop runs.
// $direction = top, right, bottom, left ; set the direction
//

@mixin spacing( $type, $multiple, $end, $direction ) {
  $class: m;

  @if $type == padding {
    $class: p;
  } @else {
    $class: m;
  }

  @for $i from 1 through $end {
    @if $direction == top {
      .#{$class}t#{$multiple * $i} {
        #{$type}-top: 1px*($multiple * $i);
      }
    } @else if $direction == bottom {
      .#{$class}b#{$multiple * $i} {
        #{$type}-bottom: 1px*($multiple * $i);
      }
    } @else if $direction == left {
      .#{$class}l#{$multiple * $i} {
        #{$type}-left: 1px*($multiple * $i);
      }
    } @else if $direction == right {
      .#{$class}r#{$multiple * $i} {
        #{$type}-left: 1px*($multiple * $i);
      }
    }
  }
}

// 14. Grids
// ===========================================

//
// This mixin will create a grid with the number of columns given. Columns
// numbers will be in English e.g. 'five' or 'seven' and up to 'twelve'
//
// @param   $number     enter the number of columns you want to create.
// @param   $gutter     enter the gutter value in pixels or percentage.
// @param   $row-class  enter the class for your row, e.g. 'w-row'
//
// Example
//
// @include grid( 6, 10px, '.w-row' );
//

@mixin grid( $number, $gutter, $row-class, $numeric: true ) {
  $column-number: $number + 1;
  $columns: (
    "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve"
  );

  .#{$row-class} {
    @extend %clearfix;
    margin-left: -$gutter;
    margin-right: -$gutter;
    margin-bottom: $gutter;
  }

  .enso-col {
    float: left;
    padding-left: $gutter;
    padding-right: $gutter;

    // Apply the styling only on desktop.
    @include bp-medium-min {
      @for $i from 1 to $column-number {
        // Check if $numeric is true.
        @if $numeric {
          &--#{$i} {
            width: ( 100% * $i ) / $number;
          }
        // else.
        } @else {
          &--#{ nth( $columns, $i ) } {
            width: ( 100% * $i ) / $number;
          }
        }
      }
    }
  }
}

@mixin postion ($type: absolute, $top: initial, $left: initial, $right: initial, $bottom: initial ) {
  position: $type;
  top: $top;
  bottom: $bottom;
  right: $right;
  left: $left;
}

@mixin border-1px ($direction, $color: $color-border-line) {
  position: relative;
  &::after {
    content: '';
    position: absolute;
    background: $color;
    @if $direction == left {
      left: 0;
      top: 0;
      height: 100%;
      width: 2px;
      transform: scaleX(0.5);
      transform-origin: left 0;
    }
    @if $direction == right {
      right: 0;
      top: 0;
      height: 100%;
      width: 2px;
      transform: scaleX(0.5);
      transform-origin: right 0;
    }
    @if $direction == bottom {
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      transform: scaleY(0.5);
      transform-origin: 0 bottom;
    }
    @if $direction == top {
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      transform: scaleY(0.5);
      transform-origin: 0 top;
    }
  }
}

/*四条border样式*/
@mixin all-border-1px ($color, $radius) {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border: 2px solid $color;
  border-radius: $radius * 2;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}